<template>

	<div id="app">
		<div class="container">
			<!-- 内容区域 -->
			<div class="content">
				<!-- 存款业务组 -->
				<div class="business-group">
					<div class="group-header" @click="toggleGroup('one')">
						<span class="group-title">存款</span>
						<span class="group-arrow" :class="{expanded: expandedGroups.one}">▼</span>
					</div>
					<div class="business-list" v-show="expandedGroups.one">
						<div class="business-item" :class="{active: selectedId === 10}" @click="selectItem(10)">
							<span class="business-name">个人储蓄存款</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 11}" @click="selectItem(11)">
							<span class="business-name">对公存款</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 12}" @click="selectItem(12)">
							<span class="business-name">其他存款</span>
						</div>
					</div>
				</div>

				<!-- 个人业务组 -->
				<div class="business-group">
					<div class="group-header" @click="toggleGroup('two')">
						<span class="group-title">贷款</span>
						<span class="group-arrow" :class="{expanded: expandedGroups.two}">▼</span>
					</div>
					<div class="business-list" v-show="expandedGroups.two">
						<div class="business-item" :class="{active: selectedId === 21}" @click="selectItem(21)">
							<span class="business-name">小微企业抵押贷款</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 22}" @click="selectItem(22)">
							<span class="business-name">农业生产经营贷款</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 23}" @click="selectItem(23)">
							<span class="business-name">快贷</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 24}" @click="selectItem(24)">
							<span class="business-name">房贷</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 25}" @click="selectItem(25)">
							<span class="business-name">项目贷款</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 26}" @click="selectItem(26)">
							<span class="business-name">公司信贷</span>
						</div>
					</div>
				</div>

				<!-- 代理业务组 -->
				<div class="business-group">
					<div class="group-header" @click="toggleGroup('three')">
						<span class="group-title">支付结算</span>
						<span class="group-arrow" :class="{expanded: expandedGroups.three}">▼</span>
					</div>
					<div class="business-list" v-show="expandedGroups.three">
						<div class="business-item" :class="{active: selectedId === 31}" @click="selectItem(31)">
							<span class="business-name">传统结算</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 32}" @click="selectItem(32)">
							<span class="business-name">电子支付</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 33}" @click="selectItem(33)">
							<span class="business-name">收单</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 34}" @click="selectItem(34)">
							<span class="business-name">对公结算</span>
						</div>
					</div>
				</div>

				<div class="business-group">
					<div class="group-header" @click="toggleGroup('four')">
						<span class="group-title">代理业务</span>
						<span class="group-arrow" :class="{expanded: expandedGroups.four}">▼</span>
					</div>
					<div class="business-list" v-show="expandedGroups.four">
						<div class="business-item" :class="{active: selectedId === 41}" @click="selectItem(41)">
							<span class="business-name">财政类代理</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 42}" @click="selectItem(42)">
							<span class="business-name">保险类代理</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 43}" @click="selectItem(43)">
							<span class="business-name">其他代理</span>
						</div>

					</div>
				</div>

				<div class="business-group">
					<div class="group-header" @click="toggleGroup('five')">
						<span class="group-title">中间及扩展业务</span>
						<span class="group-arrow" :class="{expanded: expandedGroups.five}">▼</span>
					</div>
					<div class="business-list" v-show="expandedGroups.five">
						<div class="business-item" :class="{active: selectedId === 51}" @click="selectItem(51)">
							<span class="business-name">银行卡增值服务</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 52}" @click="selectItem(52)">
							<span class="business-name">理财服务</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 53}" @click="selectItem(53)">
							<span class="business-name">信用服务</span>
						</div>
						<div class="business-item" :class="{active: selectedId === 54}" @click="selectItem(54)">
							<span class="business-name">贵金属</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				// 当前选中的业务项ID
				selectedId: null,
				method: null,
				// 展开/折叠的业务组状态
				expandedGroups: {
					one: false, // 存款组默认展开
					two: false,
					three: false,
					four: false,
					five: false,
					six: false,
				}
			}
		},
		methods: {
			// 选择业务项
			selectItem(id) {
				this.selectedId = id;
				console.log('选中业务项ID:', id);
				// 在实际应用中，这里可以添加业务逻辑，如跳转页面、加载数据等
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2]

				if (prevPage && prevPage.$vm) {
					if (this.method == 'handleIntendedProduct2') {
						prevPage.$vm.handleIntendedProduct2(id)
					} else {
						prevPage.$vm.handleBackData(id)
					}

				}

				uni.navigateBack({
					delta: 1
				})
			},

			// 切换业务组展开/折叠状态
			toggleGroup(groupName) {
				this.expandedGroups[groupName] = !this.expandedGroups[groupName];
			},

			// 根据ID设置默认选中项
			setDefaultSelected(id) {
				// if (id && id >= 1 && id <= 12) {
				this.selectedId = id;

				// 	// 根据选中的ID自动展开对应的业务组
				// 	if (id <= 3) {
				// 		this.expandedGroups.deposit = true;
				// 	} else if (id <= 9) {
				// 		this.expandedGroups.personal = true;
				// 	} else {
				// 		this.expandedGroups.agent = true;
				// 	}
				// }
				if (id && id > 10 && id <= 19) {
					this.expandedGroups.one = true;
				} else if (id >= 20 && id <= 29) {
					this.expandedGroups.two = true;
				} else if (id >= 30 && id <= 39) {
					this.expandedGroups.three = true;
				} else if (id >= 40 && id <= 49) {
					this.expandedGroups.four = true;
				} else if (id >= 50 && id <= 59) {
					this.expandedGroups.five = true;
				}
			}
		},
		mounted() {
			// 示例：从URL参数获取默认选中ID
			const urlParams = new URLSearchParams(window.location.search);
			const defaultId = urlParams.get('selectedId');
			const method = urlParams.get('method');
			this.method = method;
			console.log(defaultId);
			if (defaultId) {
				this.setDefaultSelected(parseInt(defaultId));

			} else {
				// 如果没有URL参数，可以设置一个默认选中项
				// this.setDefaultSelected(1);
			}
		}
	}
</script>

<style>
	/*  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } */

	/*     body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        } */

	.container {
		max-width: 500px;
		margin: 0 auto;
		background-color: #fff;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	.navbar {
		background-color: #2b85e4;
		color: white;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 500px;
		z-index: 1000;
	}

	.navbar-left,
	.navbar-right {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
		margin-left: 10px;
	}

	.navbar-icon {
		font-size: 20px;
	}

	/* 内容区域 */
	.content {
		/* margin-top: 60px; */
		padding: 15px;
	}

	/* 业务分组 */
	.business-group {
		margin-bottom: 20px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.group-header {
		background-color: #f8f8f8;
		padding: 12px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		font-weight: bold;
	}

	.group-title {
		font-size: 16px;
		color: #333;
	}

	.group-arrow {
		font-size: 14px;
		color: #999;
		transition: transform 0.3s;
	}

	.group-arrow.expanded {
		transform: rotate(180deg);
	}

	/* 业务项列表 */
	.business-list {
		background-color: white;
	}

	.business-item {
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		transition: background-color 0.2s;
	}

	.business-item:last-child {
		border-bottom: none;
	}

	.business-item.active {
		background-color: #ecf5ff;
		color: #2b85e4;
		position: relative;
	}

	.business-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background-color: #2b85e4;
	}

	.business-name {
		font-size: 15px;
	}

	/* 响应式调整 */
	@media (max-width: 480px) {
		.content {
			padding: 10px;
		}

		.business-item {
			padding: 12px 15px;
		}
	}
</style>